<template id='todoItem'>
    <tr>
        <th scope="row">{{idx+1}}</th>
        <td>{{item.title}}</td>
        <td>
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" v-model='item.done' :id='btnID(item.id)'>
                <label class="custom-control-label" :for='btnID(item.id)'>{{item.done?"Done":"Undone"}}</label>
            </div>
        </td>
        <td>
            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                <todoButton class="btn-danger" v-on:click.native='remove(item.id)'>delete</todoButton>
            </div>
        </td>
    </tr>
</template>

<script>
import todoButton from './todoButton.vue';
import {Bus} from './Bus';

export default {
    props: ['item','idx'],
    methods: {
        btnID(idx){
            return 'customSwitch'+idx;
        },
        remove(idx){
            Bus.$emit('remove',idx)
        }
    },
    components:{
      todoButton  
    }
}
</script>

<style>

</style>